<template>
  <view class="page">
    <view
      class="page-top"
      :style="{
        backgroundImage: `url(${webSrc('/assets/web_img/my/red_bj.png')})`,
      }"
    >
      <Sub-title
        :label="getStatusText(detail.state)"
        color="#fff"
        size="34rpx"
        :bold="false"
        padding="20rpx 40rpx"
      />
      <Sub-title
        :label="detail.statetime"
        size="24rpx"
        color="#fefefebf"
        :bold="false"
        line="2"
        padding="0 40rpx"
      />
    </view>
    <view
      v-if="detail.state > 2 && detail.state != 7"
      class="order-box"
      @click="handleLogistics"
    >
      <view class="sn-body">
        <u-avatar icon="car-fill" font-size="18" bg-color="#409eff" />
        <view style="margin-left: 20rpx">
          <u-text
            :text="detail.logistics.context || '待发货'"
            block
            color="#979797"
            size="14"
            lines="1"
            line-height="22"
          />
          <u-text
            :text="detail.logistics.time || '-'"
            block
            color="#979797"
            size="14"
            line-height="22"
          />
        </view>
      </view>
    </view>
    <view class="order-box">
      <view class="sn-body">
        <u-avatar icon="map-fill" font-size="18" bg-color="#ff4950" />
        <view style="margin-left: 20rpx">
          <text class="text-name">{{ detail.address.name || "-" }}</text>
          <text style="color: #828282">{{ detail.address.mobile || "-" }}</text>
          <u-text
            :text="detail.address.address.replace(/\//g, ' ') || '-'"
            block
            color="#979797"
            size="14"
            line-height="22"
          />
        </view>
      </view>
    </view>
    <view class="order-box">
      <u-row>
        <u-col span="9">
          <view class="sn-top">{{ detail.shop.shopname || "-" }}</view>
        </u-col>
        <u-col span="3">
          <u-text :text="statusLabel" color="#3BA199" size="28rpx" align="right" />
        </u-col>
      </u-row>
      <view
        class="sn-body border"
        v-for="p in detail.goods"
        :Key="p.id"
        @click="handleGoods(p)"
      >
        <u-image
          show-loading
          :show-menu-by-longpress="false"
          :src="domain + p.image"
          width="116rpx"
          height="116rpx"
          radius="10rpx"
        />
        <view class="sn-center">
          <view class="sn-center-top">{{ p.title || "-" }}</view>
          <u-text :text="p.difference" color="#555" size="24rpx" />
        </view>
        <view class="sn-right">
          <u-text
            mode="price"
            :text="p.price || '-'"
            color="#FF3E3E"
            size="28rpx"
            align="right"
            line-height="40rpx"
          />
          <u-text
            :text="`X${p.number || '-'}`"
            color="#979797"
            size="26rpx"
            align="right"
            line-height="50rpx"
          />
          <view
            class="refund"
            v-if="detail.state > 1 && detail.state != 7"
            @click.stop="handleRefund(p)"
          >
            {{ refundLabel(p) }}
          </view>
        </view>
      </view>
      <u-gap v-if="detail.pay.discount_price != '0.00'" height="13" />
      <u-row v-if="detail.pay.discount_price != '0.00'">
        <u-col span="6">
          <u-text text="优惠金额：" color="#222222" size="28rpx" line-height="50rpx" />
        </u-col>
        <u-col span="6">
          <u-text
            :text="detail.pay.discount_price ? `-￥${detail.pay.discount_price}` : '-'"
            color="#979797"
            size="28rpx"
            align="right"
            line-height="50rpx"
          />
        </u-col>
      </u-row>
      <u-gap height="13" />
      <u-row>
        <u-col span="6">
          <u-text text="应付金额：" color="#222222" size="28rpx" line-height="50rpx" />
        </u-col>
        <u-col span="6">
          <u-text
            mode="price"
            :text="detail.pay.price || '-'"
            color="#FF3E3E"
            size="32rpx"
            align="right"
            line-height="50rpx"
          />
        </u-col>
      </u-row>
      <u-gap height="13" />
      <u-row>
        <u-col span="6">
          <u-text text="订单编号：" color="#222222" size="28rpx" line-height="50rpx" />
        </u-col>
        <u-col span="6">
          <u-text
            :text="detail.order_no || '-'"
            color="#979797"
            size="28rpx"
            align="right"
            line-height="50rpx"
          />
        </u-col>
      </u-row>
      <u-gap height="13" />
      <u-row>
        <u-col span="6">
          <u-text text="下单时间：" color="#222222" size="28rpx" line-height="50rpx" />
        </u-col>
        <u-col span="6">
          <u-text
            :text="detail.createtime_text || '-'"
            color="#979797"
            size="28rpx"
            align="right"
            line-height="50rpx"
          />
        </u-col>
      </u-row>
      <u-gap height="13" />
      <u-row>
        <u-col span="6">
          <u-text text="支付时间：" color="#222222" size="28rpx" line-height="50rpx" />
        </u-col>
        <u-col span="6">
          <u-text
            :text="detail.paymenttime_text || '-'"
            color="#979797"
            size="28rpx"
            align="right"
            line-height="50rpx"
          />
        </u-col>
      </u-row>
      <u-gap height="13" v-if="detail.remarks" />
      <u-row v-if="detail.remarks">
        <u-col span="6">
          <u-text text="备注：" color="#222222" size="28rpx" line-height="50rpx" />
        </u-col>
        <u-col span="6">
          <u-text
            :text="detail.remarks"
            color="#979797"
            size="28rpx"
            align="right"
            line-height="50rpx"
          />
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
import config from "@/request/baseUrl.js";
import { myGoodsOrderDetail } from "@/request/myApi.js";
export default {
  computed: {
    statusLabel() {
      let v = this.detail.state;
      if (v == -2) return "交易关闭";
      else if (v == 1) return "待付款";
      else if (v == 2) return "待发货";
      else if (v == 3) return "待收货";
      else if (v == 6) return "已完成";
      else return "已取消";
    },
  },
  onLoad(e) {
    this.orderId = e.id;
    this.getData();
  },
  data() {
    return {
      domain: config.baseUrl,
      orderId: "", // 订单ID
      detail: {}, // 详情内容
    };
  },
  methods: {
    // 获取订单详情
    getData() {
      myGoodsOrderDetail(this.orderId).then((res) => {
        if (res.code == 1) {
          this.detail = res.data;
          this.logisticsType = true;
          if (res.data.state == 0) {
            this.detail.statetime = "剩余时间0";
          } else if (res.data.state == 1) {
            var diff =
              res.data.createtime +
              res.data.config.cancel * 86400 -
              Date.parse(new Date()) / 1000;
            var days = Math.floor(diff / 86400);
            var hours = Math.floor((diff % 86400) / 3600);
            var minutes = Math.floor(((diff % 86400) % 3600) / 60);
            if (minutes > 0) {
              this.detail.statetime = "还剩" + minutes + "分自动关闭订单";
            }
            if (hours > 0) {
              this.detail.statetime = "还剩" + hours + "天" + minutes + "分自动关闭订单";
            }
            if (days > 0) {
              this.detail.statetime =
                "还剩" + days + "天" + hours + "小时" + minutes + "分自动关闭订单";
            }
          } else if (res.data.state == 2) {
            this.detail.statetime = "等待卖家发货";
          } else if (res.data.state == 3) {
            var diff =
              res.data.delivertime +
              res.data.config.receiving * 86400 -
              Date.parse(new Date()) / 1000;
            var days = Math.floor(diff / 86400);
            var hours = Math.floor((diff % 86400) / 3600);
            var minutes = Math.floor(((diff % 86400) % 3600) / 60);
            if (minutes > 0) {
              this.detail.statetime = "还剩" + minutes + "分自动确认收货";
            }
            if (hours > 0) {
              this.detail.statetime = "还剩" + hours + "天" + minutes + "分自动确认收货";
            }
            if (days > 0) {
              this.detail.statetime =
                "还剩" + days + "天" + hours + "小时" + minutes + "分自动确认收货";
            }
          } else if (res.data.state == 4) {
            var diff =
              res.data.taketime +
              res.data.config.comment * 86400 -
              Date.parse(new Date()) / 1000;
            var days = Math.floor(diff / 86400);
            var hours = Math.floor((diff % 86400) / 3600);
            var minutes = Math.floor(((diff % 86400) % 3600) / 60);
            if (minutes > 0) {
              this.detail.statetime = "还剩" + minutes + "分自动评论";
            }
            if (hours > 0) {
              this.detail.statetime = "还剩" + hours + "天" + minutes + "分自动评论";
            }
            if (days > 0) {
              this.detail.statetime =
                "还剩" + days + "天" + hours + "小时" + minutes + "分自动评论";
            }
          } else if (res.data.state == 6) {
            this.detail.statetime = res.data.dealtime_text;
          } else if (res.data.state == 7) {
            this.detail.statetime = "订单已取消";
          }
        }
      });
    },
    // 订单状态
    getStatusText(v) {
      return [
        "等待您付款",
        "付款成功",
        "待收货",
        "待评论",
        "退款订单",
        "订单已完成",
        "交易关闭",
      ][v - 1] || "交易已关闭";
    },
    // 退款状态
    refundLabel(v) {
      return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][
        v.refund_status
      ];
    },
    // 查看商品
    handleGoods(goods) {
      uni.navigateTo({ url: `/pages/mall/goodsDetail?id=${goods.goods_id}` });
    },
    // 查看物流信息
    handleLogistics() {
      uni.navigateTo({ url: "/pages/my/logistics?id=" + this.detail.id });
    },
    // 申请退款
    handleRefund(goods) {
      let order = {
        order_id: this.detail.id,
        order_type: "goods",
        goods_id: goods.id,
        money: goods.actual_payment,
        virtual_coin: goods.virtual_coin,
        pay_type: this.detail.pay.pay_type,
      };
      if (goods.refund_status == 0) {
        uni.navigateTo({
          url: `/pages/my/myGoodsRefund?data=${JSON.stringify(order)}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/my/myRefundDetail?id=${goods.refund_id}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-top {
  width: 100%;
  height: 168rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.order-box {
  padding: 20rpx 30rpx;
  margin: 20rpx;
  box-shadow: 0px 0px 10px rgba(186, 186, 186, 0.2);
  border-radius: 10px;
  margin-bottom: 30rpx;
  .sn-top {
    font-size: 28rpx;
    font-weight: 600;
    color: #222;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .sn-time {
    font-size: 28rpx;
    color: #979797;
  }
  .sn-body {
    padding: 30rpx 0;
    display: flex;
    .sn-right {
      width: 170rpx;
      position: relative;
      .refund {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 23rpx;
        padding: 3rpx 13rpx;
        border: 1rpx solid #ccc;
      }
    }
    .text-name {
      color: #222;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  .sn-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 116rpx;
    margin-left: 20rpx;
    &-top {
      font-size: 28rpx;
      font-weight: 600;
      color: #222;
      line-height: 40rpx;
      word-break: break-all;
    }
  }
}
.border {
  border-bottom: 1rpx dashed rgba(217, 217, 217, 0.6);
}
</style>
